<template>
    <div class="order-list">
        <van-search v-model="searchValue" class="order-search-bar" shape="round" show-action v-if="searchVisible"
                    placeholder="请输入商品名"
                    @cancel="searchVisible = !searchVisible"
                    @search="handleSearch"/>
        <van-nav-bar left-arrow fixed placeholder :border="false" title="我的订单"
                     @click-left="$router.back()"
                     @click-right="searchVisible = !searchVisible" v-else>
            <template #right>
                <van-icon name="search" size="18"/>
            </template>
        </van-nav-bar>
        <van-tabs v-model="activeTab" sticky swipeable animated>
            <van-tab v-for="tab in statusTabs" :key="tab.name" :title="tab.title" :name="tab.name">
                <white-space/>
                <order-list v-if="activeTab === tab.name" :statuses="statuses" :name="name"/>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
  import * as _ from "lodash"
  import { Icon, NavBar, Search, Tab, Tabs } from "vant"
  import OrderList from "@/components/order/OrderList"
  import WhiteSpace from "@/components/WhiteSpace"
  import { awaitingFulfillmentStatuses, awaitingPaymentStatuses, awaitingPickupStatuses, completedStatuses } from "@/utils/order"

  function createStatusTab(title, statuses) {
    return { name: title, title, statuses }
  }

  const statusTabs = [
    createStatusTab("全部", []),
    createStatusTab("待付款", awaitingPaymentStatuses),
    createStatusTab("待发货", awaitingFulfillmentStatuses),
    createStatusTab("待收货", awaitingPickupStatuses),
    createStatusTab("待评论", completedStatuses),
    // createStatusTab("售后", [OrderStatus.AwaitingFulfillment]),
  ]


  export default {
    name: "OrderListView",
    components: {
      WhiteSpace,
      OrderList,
      [Icon.name]: Icon,
      [NavBar.name]: NavBar,
      [Search.name]: Search,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
    },
    props: {
      statuses: Array,
    },
    computed: {
      activeTab: {
        get() {
          const { statuses } = this
          const statusTab = _.find(statusTabs, aStatusTab => _.isEqual(aStatusTab.statuses, statuses))
          return _.isUndefined(statusTab) ? "全部" : statusTab.name
        },
        set(activeTab) {
          const statusTab = _.find(statusTabs, aStatusTab => _.isEqual(aStatusTab.name, activeTab))
          const statuses = _.isUndefined(statusTab) ? [] : statusTab.statuses
          const oldStatuses = _.isEmpty(this.$route.query.statuses) ? [] : _.split(this.$route.query.statuses, ",")
          if (!_.isEqual(oldStatuses, statuses)) {
            this.$router.replace({
              path: `/orders`,
              query: {
                ...(_.isEmpty(statuses) ? {} : { statuses: _.join(statuses, ",") }),
              },
            })
          }
        },

      },
    },
    data() {
      return {
        statusTabs,
        searchVisible: false,
        searchValue: "",
        name: "",
      }
    },
    methods: {
      handleSearch(value) {
        this.name = value
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-list {
        .order-search-bar {
            padding: 6px 12px;
        }
    }
</style>
